<template>
  <div class="ui middle aligned center aligned grid">
    <div class="six wide column">
      {{ this.user.changeid}}
      <form class="ui form adduserform" @submit.prevent="onSubmit">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input
              type="text"
              name="email"
              v-model="user.email"
              placeholder="E-mail address"
              v-on:input="clearerrors"
              required
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input
              type="text"
              name="username"
              v-model="user.name"
              placeholder="User name"
              v-on:input="clearerrors"
              required
              disabled="disabled"
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input
              type="password"
              name="password"
              v-model="user.password"
              placeholder="Password"
              v-on:input="clearerrors"
              required
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input
              type="password"
              name="repassword"
              v-model="user.repassword"
              placeholder="re-Password"
              v-on:input="clearerrors"
            />
          </div>
        </div>
        <div class="ui error message" v-bind:class="{ 'shown': hasError }">{{ errors.message }}</div>
        <sui-message success v-bind:class="{ 'shown': hasMessage }">{{messages.message}}</sui-message>
        <button id="savebtn" class="ui fluid large teal button">Save</button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getuserinfoapi, changeuserinfoapi } from "@/api/user";
const Cookie = process.client ? require("js-cookie") : undefined;

export default {
  data() {
    return {
      user: {
        username: "",
        password: "",
        email: "",
        repassword: "",
      },
      errors: {},
      messages: {},
    };
  },
  computed: {
    hasError() {
      if (JSON.stringify(this.errors) === "{}") {
        return false;
      } else {
        return true;
      }
    },
    hasMessage() {
      if (JSON.stringify(this.messages) === "{}") {
        return false;
      } else {
        return true;
      }
    },
    //...mapState(["user"]),
  },
  async asyncData({
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error,
  }) {
    //query.key
    //params.id
    console.dir(params);
    console.dir(query);
    console.dir(req);

    const auth = store.state.user.auth;
    try {
      const { data } = await getuserinfoapi(auth, { id: query.id });
      console.log(data);
      data.auth = auth;
      return { user: data };
    } catch (error) {}
  },
  methods: {
    clearerrors() {
      this.errors = {};
    },
    delaypush() {
      this.$router.push("/main");
    },
    logout(){
     this.$store.commit("unsetUser");
     Cookie.remove('user');
     this.$router.push('/login')
    },
    async onSubmit() {
      if (this.user.password != this.user.repassword) {
        this.errors = { message: "两次输入的密码不一样" };
        //seterror("两次输入的密码不一样")
        return;
      }
      const auth = this.user.auth;
      console.dir(auth);
      try {
        let changedata = {
          id: this.user.id,
          password: this.user.password,
          name:this.user.name,
          email: this.user.email,
        };
        
        const { data } = await changeuserinfoapi(auth, changedata);
        console.log(data);

      
        this.messages = { message: "操作成功" };
        if (this.user.id === this.$store.state.user.id){
          this.logout()
        }else {
setTimeout(this.delaypush, 2000);
        }
        
      } catch (error) {
        //console.log(error)
        this.hasError;
        console.dir(error);
        this.errors = error.response.data;
        //this.errors.status = error.response.status

        console.log(this.errors);
        this.hasError;
        this.$router2 = { user: null };
        console.log(this.$router2);
      }
      //解构数据，获取响应体data
    },
  },
};
</script>

<style>
.shown {
  display: block !important;
}
</style>